<script setup lang="ts">
  import { reactive, ref } from 'vue';
  //reactive只能修饰对象类型,包括数组
  const state = reactive({ nested:{count: 0}, arr: ['foo', 'bar']});

  const msg = ref('爱猫咪...');
  // setInterval(()=>{
  //   state.count++
  // }, 1000);
  function mutateDeeply(){
    state.nested.count++;
    state.arr.push('baz');
    msg.value = '我也爱猫咪...'
  }

</script>

<template>
  {{ state.nested.count }}<br />
  {{ msg }}
  <div v-if="state.nested.count < 5">
    <ul>
      <li v-for="(item, index) in state.arr" :key="index">{{ item }}</li>
    </ul>
  </div>
  <button v-on:click='mutateDeeply'>添加按钮递增</button>
</template>

<style lang="less" scoped>
  div {
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
</style>